<template>
	<view class="content">
		<view>
			<image src="../../static/bg.png" style="width: 100%;height: 398upx;position: relative;z-index: 1;"></image>
			<image src="../../static/logo.png" class="logo"></image>
			<!-- 后面做一键登录 -->
			<view class="regbox">
				<view class="regcontent">
					<view class="fsb" style="border-bottom: 1upx solid #EEEFF1;padding: 40upx 10upx 20upx;">
						<view class="flex aic">
							<image src="../../static/l-1.png" style="width: 24upx;height: 34upx;margin-right: 10upx;"></image>
							<input style="margin-left: 20upx;" placeholder="请输入手机号" v-model="phone" maxlength="11"/>
							<button  class="f24 codebtn"  style="width: 150upx;color: #1D84E8;height: 50upx;text-align: center;line-height: 50upx;" :disabled="mydis" @click="dyzm" v-if="flag">发送验证码</button>
							<view class="f24" style="width: 150upx;color: #1D84E8;height: 50upx;text-align: center;line-height: 50upx;" v-else>
								{{last_time}}s 
							</view>
						</view>
					</view>
					
					<view class="fsb " style="border-bottom: 1upx solid #EEEFF1;padding: 40upx 10upx 20upx;">
						<view class="flex aic " style="width: 100%;">
							<image src="../../static/l-6.png" style="width: 34upx;height: 34upx;"></image>
							<input style="margin-left: 20upx;" placeholder="请输入验证码"  v-model="yzcode" class="flex-1"/>
						</view>
					</view>
					
					<view class="fsb " style="border-bottom: 1upx solid #EEEFF1;padding: 40upx 10upx 20upx;">
						<view class="flex aic "  style="width: 100%;">
							<image src="../../static/l-2.png" style="width: 34upx;height: 34upx;"></image>
							<input style="margin-left: 20upx;" placeholder="请输入密码" type="password" class="flex-1"  v-model="password" maxlength="10"/>
						</view>
					</view>
					<view class="fsb " style="border-bottom: 1upx solid #EEEFF1;padding: 40upx 10upx 20upx;">
						<view class="flex aic"  style="width: 100%;">
							<image src="../../static/l-2.png" style="width: 34upx;height: 34upx;"></image>
							<input style="margin-left: 20upx;" placeholder="再次输入密码" type="password" class="flex-1" v-model="agianword" maxlength="10"/>
						</view>
					</view>
					<view class="fsb " style="border-bottom: 1upx solid #EEEFF1;padding: 40upx 10upx 20upx;">
						<view class="flex aic"  style="width: 100%;">
							<image src="../../static/l-2.png" style="width: 34upx;height: 34upx;"></image>
							<input style="margin-left: 20upx;" placeholder="请输入安全密码" type="password" class="flex-1" v-model="safeword" maxlength="10"/>
						</view>
					</view>
					<view class="fsb " style="border-bottom: 1upx solid #EEEFF1;padding: 40upx 10upx 20upx;">
						<view class="flex aic"  style="width: 100%;">
							<image src="../../static/m-9.png" style="width: 34upx;height: 34upx;"></image>
							<input style="margin-left: 20upx;" placeholder="邀请码(选填)" class="flex-1" v-model="referral_code" maxlength="10"/>
						</view>
					</view>
					<!-- 用户协议 -->
					<view class="flex aic" style="margin-top:30upx;">
						<view>
							<checkbox-group @change="checkboxChange">
								<checkbox value="xieyi" :checked="xieyi" color="#EC6104" style="transform:scale(0.7)" />
							</checkbox-group>
						</view>
						<view style="font-size: 26upx;color: #666;">同意<text style="color: #1D84E8;" @click="uxieyi()">《用户协议》</text></view>
					</view>
					<button class="logbtn" :class="phone==''?'defeat':'fill'"  @click="wisireg()">注册</button>
					
					<view style="color: #1D84E8;font-size: 28upx;text-align: center;"  @click="gologin()">
						登录
					</view>
				</view>
				
				<!-- <view style="margin-top: 140upx;">
					<view class="flex aic jc-center" style="color: #ddd;font-size: 26upx;">
						<text class="line"></text><text style="margin: 0 16upx;">第三方登录账号</text><text class="line"></text>
					</view>
					<view style="width: 440upx;margin: 40upx auto 0;" class="flex aic jsb" @click="thirdlogin">
						<image src="../../static/l-3.png" class="third"></image>
						<image src="../../static/l-4.png" class="third"></image>
						<image src="../../static/l-5.png" class="third"></image>
					</view>
				</view> -->
			</view>
		</view>
	</view>
	</template>
	<script>
	import postAjax from '../../API/postAjax.js'
	//倒计时
	var countdown = 60;
	var settime = function (that) {
	  if (countdown == 0) {
			that.flag = true
			countdown = 60;
			return;
	  } else {
			that.flag = false
			that.last_time = countdown
			countdown--;
	  }
	  setTimeout(function () {
			settime(that)
	  } , 1000)}
	  
	export default {
		data() {
			return {
				phone:'',
				password:'',
				agianword:'',
				referral_code:'',
				safeword:'',
				yzcode:'',
				last_time:'',
				flag:true,
				mydis:false,
				xieyi:false// 用户协议
			}
		},
		components:{
		},
		onLoad(options) {

		},
		methods: {
			// denglv
			gologin(){
				uni.navigateTo({
					url:'login',
					animationDuration:300
				})
			},
			checkboxChange(e){
				this.xieyi=!this.xieyi
			},
			uxieyi(){
				uni.navigateTo({
					url:'uxieyi'
				})
			},
			// 获取验证码
			dyzm(){
				let that = this
				if(that.phone == ''){
					uni.showToast({title: '请输入手机号',icon: 'none',duration: 1500});
					return
				}
				that.mydis=true
				setTimeout(()=>{
				   that.mydis=false   //点击一次时隔两秒后才能再次点击
				},2000)
				postAjax('user/VerifySend',{mobile:that.phone},function(data){
					if(data.code == 0){
						uni.showToast({	title: data.msg,duration: 1500});						
						settime(that)
						
					}else{
						uni.showToast({	icon:'none',title:data.msg})
					}
					
				})
			},
			// 注册
			wisireg(){
				let that = this
				let regxp =/^1[3-9]\d{9}$/
				if(that.phone == ''){
					uni.showToast({	title: '请输入手机号',icon: 'none',duration: 1500});
					return
				}
				if(!regxp.test(that.phone)){
					uni.showToast({	title: '输入的手机号有误',icon: 'none',duration: 1500});
					return
				}
				if(that.yzcode == ''){
					uni.showToast({	title: '请输入短信验证码',icon: 'none',duration: 1500});
					return
				}
				if(that.password == ''){
					uni.showToast({title: '请输入密码',icon: 'none',duration: 1500});
					return
				}
				if(that.agianword == ''){
					uni.showToast({title: '请再次输入密码',icon: 'none',duration: 1500});
					return
				}
				if(that.safeword == ''){
					uni.showToast({title: '请输入安全密码',icon: 'none',duration: 1500});
					return
				}
				if(that.agianword !== that.password ){
					uni.showToast({title: '两次输入的密码不一致',icon: 'none',duration: 1500});
					return
				}
				if(!that.xieyi){
					uni.showToast({	title: '请勾选用户协议',icon: 'none',duration: 1500});
					return
				}
				let postData = {
					accounts:that.phone,
					pwd:that.password,
					type:'sms',
					referral_code:that.referral_code,
					paypwd:that.safeword,
					verify:that.yzcode
				}
				console.log(postData)
				postAjax('user/appReg',postData,function(data){
					console.log(data)
					uni.showToast({icon:'none',	title:data.msg});
					if(data.code == 0){			
						
						setTimeout(function () {
								uni.navigateTo({
									url:'login',
									duration: 1500
								})
						} , 2000)
					}
					 					 
				})
			},
			
			// thirdlogin(){
			// 	uni.showToast({
			// 	  title:'暂不支持第三方登录',
			// 	  icon:'none'
			// 	})
			// }
		}
	}
	
</script>

<style>
	.regbox{margin-top: -100upx;padding:0 30upx;position: relative;z-index: 10;}
	.regcontent{padding:50upx 50upx 110upx;background-color: #fff;border-radius: 20upx;box-shadow:0px 6px 13px rgba(29,132,232,0.2);}
	.logbtn{border-radius: 6upx;color:#fff;display:block;font-size: 30upx;border-radius: 4upx;width:456upx;height: 76upx;line-height: 76upx;text-align: center;padding: 0;margin: 100upx auto 40upx;}
	.logbtn::after,.codebtn::after{border: none;}
	.defeat{background: #ddd;}
	.third{width: 76upx;height: 76upx;}
	.line{width: 126upx;height: 2upx;background-color: #ddd;}
	.fill{background:linear-gradient(90deg,rgba(92,171,246,1) 0%,rgba(30,132,232,1) 100%);}
	.flex-1{flex:1;position: relative;}
	.codebtn{background-color: #fff;padding: 0;}
	uni-button[disabled]:not([type]){
		background-color: #fff;
	}
	.leftcont::after{content: '';width: 2upx;height: 80%;background-color: #1D84E8;position: absolute;top:10%;right:0}
	.logo{position: absolute;width: 150upx;height: 30upx;top:150upx;left: 50%;margin-left: -75upx;z-index: 12;}
	/* .fillinp{padding-left: 16upx;font-size: 28upx;margin-left: 20upx;}
	.fillbox{padding:40upx 0 20upx;border-bottom: 2upx solid #eee;} */
	
</style>
